<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-curent-row
    >
      <el-table-column align="center" label="ID" min-width="5%">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="设备号" min-width="20%">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" min-width="25%">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="25%">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a :href="scope.row.snap" target="_blank" title="查看最大化图片">
              <img :src="scope.row.snap" class="max" alt="查看最大化图片">
            </a>
            <img slot="reference" :src="scope.row.snap" class="thumb" alt="缩略图">

          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="25%">
        <template slot-scope="scope">
          <el-button type="success" class="el-icon-video-play" size="mini" @click="video(scope.row.hls, scope.row)">播放视频</el-button>
          <el-button type="default" class="el-icon-picture" size="mini" @click="timing(scope.row)">定时截图</el-button>
          <el-button type="default" class="el-icon-warning" size="mini" @click="alerts(scope.row)">报警记录</el-button>
          <el-button type="danger"  class="el-icon-delete"  size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <preview-dialog :show.sync="previewShow" :camera.sync="viewItem" />
  </div>
</template>

<script>
import {deleteByChannelDevice, list} from '@/api/channel'
import previewDialog from './previewDialog.vue'

export default {
  components: {
    previewDialog
  },
  data() {
    return {
      previewShow: false,
      parentId:null,
      list: null,
      listLoading: true,
      viewItem: {
        'rtmp': [''], 'hls': [''], 'flv': ['']
      }
    }
  },

  created() {
    this.parentId = this.$route.query.parentId;
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      list({parentId: this.parentId}).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    video(hls, item) {
      this.viewItem = item
      this.previewShow = true
    },
    timing(item) {
      console.info('timing', item)
      this.$router.push({path: '/device/timing', query: {deviceid: item.parentid, channelid: item.deviceid}})
    },
    alerts(item) {
      console.info('alerts', item)
      this.$router.push({path: '/device/alerts', query: {deviceid: item.parentid, channelid: item.deviceid}})
    },
    del(item){
      console.info('选择的项目', item);
      this.$confirm('确认删除此子通道？').then(_ => {
        this.listLoading = true
        deleteByChannelDevice({ parentId: item.parentid, deviceId: item.deviceid }).then(response => {
          this.listLoading = false
          this.fetchData()
        })
      }).catch(_ => {
        console.error(_);
      })
    }
  }
}
</script>

<style>
  .thumb{
    max-width:6rem;
    max-height:6rem;
    cursor: pointer;
  }
  .max{
    max-width:24rem;
    max-height:24rem;

  }
</style>
